<template>
  <view class="order-list-page">
    <view class="tab-option">
      <uni-segmented-control
        :current="activeTab"
        :values="items"
        @clickItem="handleChangeOrderStatus"
        styleType="text"
        activeColor="#4CC1EE"
      ></uni-segmented-control>
    </view>

    <view v-show="activeTab === 0">
      <scroll-view
        scroll-y
        class="scroll-content"
        :style="{height: scrollHeight + 'px'}"
        @scrolltolower="handleLoadMore"
        lower-threshold="70"
      >
        <view
          v-if="isNullData"
          class="no-data"
        >
          <van-empty description="暂无数据"/>
        </view>

        <view
          class="order-item-wrap mt-20"
          v-for="(item, index) in list"
          :key="index"
          @click="handleToOrderDetail(item)"
        >
          <view class="left">
            <view class="send-wrap mb-20">
              <view class="icon">寄</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{item.a1name}}</view>

                  <uni-tag
                    :text="'下单时间：' + item.pay_str + '前'"
                    type="default"
                    size="small"
                  ></uni-tag>
                </view>
                <view class="bottom-address">{{ item.a1areaaddress + item.a1name_address + item.a1doornumber }}</view>
              </view>
            </view>

            <view class="send-wrap receiving-wrap">
              <view class="icon">收</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{ item.a2name }}</view>
                </view>
                <view class="bottom-address">{{ item.a2areaaddress + item.a2name_address + item.a2doornumber }}</view>
              </view>
            </view>
          </view>

          <view class="right">
            <uni-icons
              type="right"
              color="#999"
              size="20"
            ></uni-icons>
          </view>

          <view class="order-status">{{goodsStatusMapText[item.goods_status]}}</view>
        </view>

        <view
          class="loading"
          v-if="loading"
        >
          <van-loading
            color="#0091FF"
            size="34px"
          />
        </view>
      </scroll-view>
    </view>

    <view v-show="activeTab === 1">
      <scroll-view
        scroll-y
        class="scroll-content"
        :style="{height: scrollHeight + 'px'}"
        @scrolltolower="handleLoadMore"
        lower-threshold="70"
      >
        <view
          v-if="isNullData"
          class="no-data"
        >
          <van-empty description="暂无数据"/>
        </view>

        <view
          class="order-item-wrap mt-20"
          v-for="(item, index) in list"
          :key="index"
          @click="handleToOrderDetail(item)"
        >
          <view class="left">
            <view class="send-wrap mb-20">
              <view class="icon">寄</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{item.a1name}}</view>
                  <uni-tag
                    :text="'下单时间：' + item.pay_str + '前'"
                    type="default"
                    size="small"
                  ></uni-tag>
                </view>
                <view class="bottom-address">{{ item.a1areaaddress + item.a1name_address + item.a1doornumber }}</view>
              </view>
            </view>

            <view class="send-wrap receiving-wrap">
              <view class="icon">收</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{ item.a2name }}</view>
                </view>
                <view class="bottom-address">{{ item.a2areaaddress + item.a2name_address + item.a2doornumber }}</view>
              </view>
            </view>
          </view>

          <view class="right">
            <uni-icons
              type="right"
              color="#999"
              size="20"
            ></uni-icons>
          </view>

          <view class="order-status">{{goodsStatusMapText[item.goods_status]}}</view>
        </view>

        <view
          class="loading"
          v-if="loading"
        >
          <van-loading
            color="#0091FF"
            size="34px"
          />
        </view>
      </scroll-view>
    </view>

    <view v-show="activeTab === 2">
      <scroll-view
        scroll-y
        class="scroll-content"
        :style="{height: scrollHeight + 'px'}"
        @scrolltolower="handleLoadMore"
        lower-threshold="70"
      >
        <view
          v-if="isNullData"
          class="no-data"
        >
          <van-empty description="暂无数据"/>
        </view>

        <view
          class="order-item-wrap mt-20"
          v-for="(item, index) in list"
          :key="index"
          @click="handleToOrderDetail(item)"
        >
          <view class="left">
            <view class="send-wrap mb-20">
              <view class="icon">寄</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{item.a1name}}</view>
                  <uni-tag
                    :text="'下单时间：' + item.pay_str + '前'"
                    type="default"
                    size="small"
                  ></uni-tag>
                </view>
                <view class="bottom-address">{{ item.a1areaaddress + item.a1name_address + item.a1doornumber }}</view>
              </view>
            </view>

            <view class="send-wrap receiving-wrap">
              <view class="icon">收</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{ item.a2name }}</view>
                </view>
                <view class="bottom-address">{{ item.a2areaaddress + item.a2name_address + item.a2doornumber }}</view>
              </view>
            </view>
          </view>

          <view class="right">
            <uni-icons
              type="right"
              color="#999"
              size="20"
            ></uni-icons>
          </view>

          <view class="order-status">{{goodsStatusMapText[item.goods_status]}}</view>
        </view>

        <view
          class="loading"
          v-if="loading"
        >
          <van-loading
            color="#0091FF"
            size="34px"
          />
        </view>
      </scroll-view>
    </view>

    <view v-show="activeTab === 3">
      <scroll-view
        scroll-y
        class="scroll-content"
        :style="{height: scrollHeight + 'px'}"
        @scrolltolower="handleLoadMore"
        lower-threshold="70"
      >
        <view
          v-if="isNullData"
          class="no-data"
        >
          <van-empty description="暂无数据"/>
        </view>

        <view
          class="order-item-wrap mt-20"
          v-for="(item, index) in list"
          :key="index"
          @click="handleToOrderDetail(item)"
        >
          <view class="left">
            <view class="send-wrap mb-20">
              <view class="icon">寄</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{item.a1name}}</view>
                </view>
                <view class="bottom-address">{{ item.a1areaaddress + item.a1name_address + item.a1doornumber }}</view>
              </view>
            </view>

            <view class="send-wrap receiving-wrap">
              <view class="icon">收</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{ item.a2name }}</view>
                </view>
                <view class="bottom-address">{{ item.a2areaaddress + item.a2name_address + item.a2doornumber }}</view>
              </view>
            </view>
          </view>

          <view class="right">
            <uni-icons
              type="right"
              color="#999"
              size="20"
            ></uni-icons>
          </view>

          <view class="order-status">{{goodsStatusMapText[item.goods_status]}}</view>
        </view>

        <view
          class="loading"
          v-if="loading"
        >
          <van-loading
            color="#0091FF"
            size="34px"
          />
        </view>
      </scroll-view>
    </view>

  </view>
</template>

<script>
  const app = getApp()

  export default {
    data() {
      return {
        activeTab: 0,
        scrollHeight: 600,
        pageIndex: 1,
        pageSize: 10,
        loading: true,
        hasMoreData: false,
        isNullData: false,
        list: [],
        items: [
          '待接单',
          '已接单',
          '配送中',
          '已完成'
        ],
        goodsStatusMapText: {
          0: '待接单',
          1: '已接单',
          2: '配送中',
          3: '已完成'
        }
      };
    },
    methods: {
      handleChangeOrderStatus(res) {
        const {
          currentIndex
        } = res

        this.activeTab = currentIndex
        this.handleInitPageInfo()
        this.handleGetList()
      },
      handleInitPageInfo() {
        this.pageIndex = 1
        this.hasMoreData = false
        this.isNullData = false
        this.list = []
      },
      handleScroll(res) {
        console.log(res);
      },
      handleLoadMore() {
        const {
          loading,
          pageIndex,
          hasMoreData
        } = this

        if (loading === false && hasMoreData) {
          this.loading = true
          this.isNullData = false
          this.pageIndex = pageIndex + 1
          this.handleGetList()
        }
      },
      handleGetList() {
        const {
          activeTab,
          pageIndex,
          pageSize,
        } = this

        this.loading = true
        app.request({
          goods_status: activeTab,
          page: pageIndex,
          limit: pageSize
        }, '/api/logistics/order/user_list').then((res) => {
          const {
            code,
            data,
            msg
          } = res
          console.log(res);

          if (code === 1) {
            let getList = data.data || []
            let list = this.list


            const newList = list.concat(getList)
            let hasMoreData = true
            let isNullData = false

            if (getList.length < pageSize || !getList.length) {
              hasMoreData = false
            }

            if (pageIndex === 1 && !getList.length) {
              isNullData = true
            }

            this.hasMoreData = hasMoreData
            this.isNullData = isNullData
            this.list = newList
          } else {
            Toast(msg)
          }
        }).finally(() => {
          this.loading = false
        })
      },

      handleToOrderDetail(item) {
        console.log(item);
        const {
          oid
        } = item

        uni.navigateTo({
          url: '/pages/myFeature/orderList/orderDetail?oid=' + oid
        })
      }
    },
    onLoad(data) {
      const windowInfo = uni.getWindowInfo()
      const {
        windowHeight
      } = windowInfo
      const {
        activeTab
      } = data

      this.scrollHeight = windowHeight - 36
      if (parseInt(activeTab)) {
        this.activeTab = parseInt(activeTab)
      }
      this.handleGetList()
    },
  }
</script>

<style lang="scss">
.order-list-page {
  width: 100%;
  min-height: 100vh;
  background-color: #F9F9F9;
  .scroll-content {
    padding-top: 1rpx;
    .mt-20 {
      margin-top: 20rpx;
    }
    .order-item-wrap {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 200rpx;
      padding: 0 22rpx;
      box-sizing: border-box;
      background-color: #fff;
      .order-status {
        position: absolute;
        right: 30rpx;
        top: 20rpx;
        font-size: 24rpx;
        color: #f0ad4e;
        font-weight: bold;
      }
    }
    .left {
      .mb-20 {
        margin-bottom: 20rpx;
      }
      .send-wrap {
        display: flex;
        align-items: center;
        .icon {
          width: 50rpx;
          height: 50rpx;
          color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20rpx;
          background-color: #f0ad4e;
          font-size: 24rpx;
        }

        .send-info {
          .top-name {
            display: flex;
            align-items: center;
            margin-bottom: 8rpx;
            .name {
              font-size: 28rpx;
              margin-right: 22rpx;
            }
          }
          .bottom-address {
            color: #999999;
            font-size: 24rpx;
          }
        }
      }

      .receiving-wrap {
        .icon {
          width: 50rpx;
          height: 50rpx;
          color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20rpx;
          background-color: #157FB9;
          font-size: 24rpx;
        }
      }
    }
  }

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100rpx;
  }

}
</style>
